<script setup lang="ts">
import HeaderView from '../components/HeaderView.vue'
import FooterView from '../components/FooterView.vue'
</script>

<template>

  <HeaderView />

  <div class="container-container">
    <!-- <div class="navigations">

      <input placeholder="Please enter the search product name"  @keyup.enter="handleSearch" v-model="searchKeyword"  />
      <button @click="handleSearch">Search</button>
    </div> -->


    <div class="container-container-wrap">

      <router-link v-for="item in lists" :key="item.id" :to="'/Details/'+item.id">
        <el-image :src="item.pic" />
        <h3>${{ item.price }}</h3>
        <p>{{ item.name }}</p>
      </router-link>

      <div v-if="lists.length==0" class="none">
        <svg t="1747672714973" class="icon" viewBox="0 0 1323 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11948" width="128" height="128"><path d="M165.213659 805.413463c-5.34478 0-9.990244 4.620488-9.990244 9.865366 0 2.622439 0.649366 4.595512 2.647414 6.568586 1.998049 1.998049 4.670439 2.647415 7.34283 2.647414h49.401756c5.34478 0 10.01522-4.620488 10.015219-9.865366a10.190049 10.190049 0 0 0-9.990244-9.865365H165.188683v0.649365z m961.910634 149.204293c5.34478 0 9.340878-4.595512 9.340878-9.865366 0-5.244878-3.996098-9.865366-9.340878-9.865366H781.336976c-5.34478 0-9.340878 4.620488-9.340878 9.865366 0 5.244878 3.996098 9.865366 9.340878 9.865366H1127.149268z m96.780487-19.05639c-5.34478 0-9.340878 4.595512-9.340878 9.84039 0 5.244878 3.996098 9.865366 9.340878 9.865366h75.426342c5.34478 0 9.365854-4.595512 9.365854-9.865366 0-5.244878-3.996098-9.84039-9.365854-9.84039h-75.426342z m-849.070829-45.355707h605.408781c5.369756 0 10.040195-4.595512 10.040195-9.865366a10.190049 10.190049 0 0 0-10.01522-9.840391H374.833951c-5.34478 0-10.01522 4.595512-10.015219 9.840391 0 5.244878 4.670439 9.865366 9.990244 9.865366z m280.35122 129.473561a9.066146 9.066146 0 0 0 9.340878-9.216c0-5.244878-3.996098-9.191024-9.340878-9.191025h-76.100683a9.066146 9.066146 0 0 0-9.340878 9.191025c0 5.269854 3.996098 9.216 9.340878 9.216h76.100683zM430.229854 11.48878c-50.076098 0-90.786341 36.139707-90.786342 80.821074V641.123902c0 44.032 40.060878 78.848 90.786342 78.848h439.895414c50.725463 0 90.786341-34.816 90.786342-78.848V187.641756L763.978927 11.48878H430.229854zM938.883122 641.123902c0 32.218537-30.045659 57.194146-68.757854 57.194147H430.229854c-38.712195 0-68.757854-24.97561-68.757854-57.194147V92.334829c0-32.842927 30.72-59.142244 68.757854-59.142244h325.082536l183.570732 164.963903V641.123902z m-666.848781 166.936976a8.366829 8.366829 0 0 0-2.67239 6.568585c0 5.244878 4.670439 9.865366 9.990244 9.865366h154.22439c5.319805 0 9.990244-4.620488 9.990244-9.865366 0-2.622439-4.670439-7.242927-9.340878-9.865365h-154.84878a15.160195 15.160195 0 0 0-7.34283 3.29678z m774.31883-2.647415H924.846829a10.264976 10.264976 0 0 0-6.693463 2.647415 9.965268 9.965268 0 0 0-2.67239 6.568585c0 5.244878 4.670439 9.865366 10.015219 9.865366h120.832c5.34478 0 9.990244-4.620488 9.990244-9.865366-0.649366-4.595512-5.319805-9.216-9.990244-9.216zM481.629659 1001.272195v-6.568585 6.568585H10.339902a9.066146 9.066146 0 0 0-9.340878 9.216c0 5.244878 3.996098 9.191024 9.365854 9.191025h471.264781a9.066146 9.066146 0 0 0 9.340878-9.191025c0-5.269854-3.996098-9.216-9.340878-9.216z" fill="#dbdbdb" p-id="11949"></path><path d="M798.72 449.211317a11.164098 11.164098 0 0 0-11.363902-11.164097H512.324683a11.164098 11.164098 0 0 0-11.338927 11.164097c0 6.568585 4.670439 11.164098 11.338927 11.164098h275.031415c6.668488-0.649366 11.338927-5.244878 11.338926-11.164098z m0-128.149854a11.164098 11.164098 0 0 0-11.363902-11.189073H512.324683a11.164098 11.164098 0 0 0-11.338927 11.189073c0 6.568585 4.670439 11.164098 11.338927 11.164098h275.031415c6.668488-0.649366 11.338927-5.244878 11.338926-11.164098z m0 258.947122a11.164098 11.164098 0 0 0-11.363902-11.189073H512.324683a11.164098 11.164098 0 0 0-11.338927 11.189073c0 6.568585 4.670439 11.164098 11.338927 11.164098h275.031415c6.668488-0.649366 11.338927-5.244878 11.338926-11.164098zM282.024585 182.396878L215.289756 181.697561a9.490732 9.490732 0 0 1-9.340878-9.191024 9.490732 9.490732 0 0 1 9.340878-9.216l66.085464 0.674341c5.34478 0 9.340878 3.921171 9.990243 9.191024 0 5.244878-3.996098 9.191024-9.340878 9.865366 0.674341-0.674341 0-0.674341 0-0.674341z" fill="#dbdbdb" p-id="11950"></path><path d="M248.007805 214.590439a9.490732 9.490732 0 0 1-9.365854-9.216l0.674342-65.061463a9.490732 9.490732 0 0 1 9.340878-9.191025 9.490732 9.490732 0 0 1 9.340878 9.191025l-0.649366 65.061463c0 5.244878-3.996098 9.216-9.365854 9.216z m716.225561-161.667122l-68.732878-0.674341a9.066146 9.066146 0 0 1-9.365854-9.191025c0-5.244878 3.996098-9.216 9.365854-9.216l68.732878 0.674342c5.34478 0 9.365854 3.946146 9.365854 9.191024s-3.996098 9.216-9.365854 9.216z" fill="#dbdbdb" p-id="11951"></path><path d="M929.542244 86.41561a9.490732 9.490732 0 0 1-9.365854-9.191025l0.674342-67.683902a9.490732 9.490732 0 0 1 9.340878-9.216 9.490732 9.490732 0 0 1 9.365853 9.216l-0.674341 67.683902a9.490732 9.490732 0 0 1-9.340878 9.216z m164.864 92.659512l-54.721561-0.62439a9.490732 9.490732 0 0 1-9.365854-9.216c0-5.244878 3.996098-9.191024 9.365854-9.191025l54.721561 0.649366c5.34478 0 9.340878 3.946146 9.340878 9.191025a9.490732 9.490732 0 0 1-9.340878 9.216z" fill="#dbdbdb" p-id="11952"></path><path d="M1067.032976 205.374439a9.490732 9.490732 0 0 1-9.340878-9.191024l0.674341-53.897366c0-5.244878 3.996098-9.191024 9.340878-9.191025a9.490732 9.490732 0 0 1 9.340878 9.191025l-0.649366 53.897366a9.490732 9.490732 0 0 1-9.365853 9.191024zM748.643902 22.677854a12.412878 12.412878 0 0 0-8.01717 3.29678 10.814439 10.814439 0 0 0-3.346732 7.867317v116.33639c0 42.058927 34.716098 76.899902 78.098732 76.899903h132.170927c2.67239 0 5.994146-1.323707 8.01717-3.296781a10.814439 10.814439 0 0 0 3.346732-7.892292 12.038244 12.038244 0 0 0-3.346732-7.867317 11.139122 11.139122 0 0 0-7.992195-3.296781h-132.195902c-30.520195 0.074927-55.320976-24.226341-55.395903-54.272V33.841951c-0.674341-5.894244-5.34478-11.164098-11.338927-11.164097z" fill="#dbdbdb" p-id="11953"></path></svg>
<p>
No search results</p>
      </div>
    </div>

  </div>

  <FooterView class="footer" />

</template>

<script lang="ts">
import createAxios from '../utils/axios'

export default {
  data() {
    return {
      pageTitle: 'Search',
      lists: [],
      searchKeyword:'',
    };
  },
  created() {
    this.updateTitle();
  },
  methods: {
    updateTitle() {
      document.title = this.pageTitle; // 或者根据需要动态设置标题
    },
    // 获取商品列表
    handleSearch(){
      createAxios({
          url: '/frontend/goods/lists',
          method: 'post',
          data: {keyword: this.searchKeyword},
        },
        {
            showSuccessMessage: false,
        })
        .then((res) => {
            console.log('列表请求结果', res)
            this.lists = res.data.list
        })
        .catch(() => {
        })
    }
  }

}
</script>

<style>
input::-webkit-outer-spin-button,input[type='number']{ -moz-appearance:textfield;}
.none {
  width: 200px;
  text-align: center;
  margin: 100px auto;
  color: #c7c7c7;
}
.container-container {
  .navigations {
    display: flex;
    justify-content: flex-start;
    line-height: 30px;
    padding:16px 20px;
    margin-bottom: 40px;
      border-radius: 50px;
      border: 1px solid #c5c5c5;
      display: flex;
      justify-content: space-between;

      cursor: pointer;
    input {
      border: 0;
      outline:medium;
      width: calc( 100% - 60px );
    }
    button {
      width: 50px;
      border: 0;
      background: none;
      text-align: right;
    }


    a {
      display: inline-block;
      padding:0 20px;
      margin:0 30px 0 0;
      background-color: #fafafa;
      border: 1px solid #fafafa;
    }
    a.on {
      border: 1px solid #333;
      background-color: #ffffff;
      color: #333;
    }
    a:hover {
      border: 1px solid #333;
      color: #333;
    }
  }
  }
  .container-container-wrap {
    padding-bottom: 60px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-left: -1%;margin-right: -1%;
    a {
      display: inline-block;
      padding: 30px 0;
      width: calc( 23% - 2px );
      padding: 0;
      margin: 1%;
      border: 1px solid #f9f9f9;
      .picbg {
        background-color: #f9f9f9;
        padding: 20px;
      }
      img {
        width: 100%;
      }
      h3 {
        line-height: 40px;
        padding: 14px 5% 0 5%;
        font-size: 26px;
        background-image: linear-gradient(to right, #f41cb2, #f25511) !important;
        -webkit-background-clip: text !important;
        color: transparent !important;
      }
      p {
        font-size: 14px;
        line-height: 24px;
        padding:0 5% 0 5%;
        margin-bottom: 20px;
         overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
      }
    }
    a:hover {
      -webkit-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.08);
      box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.08);
      background-color: #fff;
    }
  }


@media only screen and (max-width: 1000px) {
  .container-container {
    max-width: 90%;
    min-width: 90%;
    width: 90%;
    margin-top: 100px;
    padding: 0;
    .navigations {
 padding:50x 20px;
      h2 {
        padding: 12px 0;
        font-size: 18px;
      }
      nav {
        display: flex;
        position: absolute;
        overflow-x: auto;
        width: 95%;
        a {
          margin: 0 14px 0 0;
          padding: 6px 12px;
        }
      }
      nav::-webkit-scrollbar {
        display: none;
      }
    }
  }
  .container-container-wrap {
    padding-bottom: 20px !important;
    justify-content: space-between !important;
    a {
      width: 46% !important;
      .el-image {
        width: 100%;
        img {
          height: 100%;
        }
      }

    }
    a:hover {
      -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0)  !important;
      box-shadow:0 0 0 0 rgba(255, 255, 255, 0) !important;
    }
  }
  .footer {
    display: none;
  }
}
</style>
